<template>
	<view class="content">
		<!-- <view class="phoneContent" style="margin-top: 20rpx;">
			<view class="name">手机号</view>
			<input placeholder="请输入银行预留手机号" placeholder-class="placeholder" class="input" v-model="bindPhone"
				maxlength="11" type="number" />
		</view> -->
		<!-- 手机号 -->
		<view class="phoneContent">
			<view class="name">真实姓名</view>
			<input placeholder="请输入真实姓名" placeholder-class="placeholder" class="input" v-model="realName" maxlength="5"
				type="text" />
		</view>

		<!-- 手机号 -->
		<view class="phoneContent">
			<view class="name">银行卡号</view>
			<input placeholder="请输入银行卡号" placeholder-class="placeholder" class="input" v-model="bankCardNumber"
				maxlength="25" type="number" />
		</view>
		<!-- <view class="phoneContent">
			<view class="name">联行号</view>
			<input placeholder="请输入联行号" placeholder-class="placeholder" class="input" v-model="interbankNumber" maxlength="25" type="number" />
		</view>
		 -->

		<!-- 手机号 -->
		<view class="phoneContent">
			<view class="name">开户银行</view>
			<input placeholder="请输入开户银行" placeholder-class="placeholder" class="input" v-model="openingBank"
				type="text" />
		</view>
		<view class="phoneContent">
			<view class="name">验证码</view>
			<input placeholder="请输入验证码" placeholder-class="placeholder" class="input" v-model="msgCode" type="text" />
			<view class="codeContent" @tap="getCodes">{{text}}</view>

		</view>
		<view class="loginContent" :class="realName && bankCardNumber&& openingBank&&msgCode?'loginContentSubmit':''"
			@tap="add">立即添加</view>
	</view>
</template>

<script>
	import {
		editPayment,
		paymentDetail,
		sendMsg
	} from '../../api/api.js'
	export default {
		data() {
			return {
				//手机号
				bindPhone: '',
				// 真实姓名
				realName: '',
				// 银行卡号
				bankCardNumber: '',
				// 开户行
				openingBank: '',
				// 收款方式id
				id: '',
				options: '',
				// interbankNumber:''
				msgCode: '',
				text: '获取验证码'
			}
		},
		onLoad(e) {
			this.id = e.id
			this.options = e.options
			if (this.id) {
				// 获取收款方式详情
				this.getDetail()
			}
		},

		methods: {
			// 获取收款方式详情
			getDetail() {
				let data = {
					id: this.id
				}
				paymentDetail(data).then(res => {
					this.realName = res.data.realName
					this.bankCardNumber = res.data.bankCardNumber
					this.openingBank = res.data.openingBank
					// this.bindPhone = res.data.bindPhone
					// this.interbankNumber = res.data.interbankNumber
				})
			},
			//获取验证码
			getCodes() {
				if (this.text != '获取验证码') {
					return false
				}
				let phone = uni.getStorageSync('phone')
				//判断手机号是否正确
				if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))) {
					let data = {
						phone: phone,
						type: 9
					}
					sendMsg(data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '验证码已发送，请注意查收~'
							})
							//正确-发送验证码，变化 text 文字
							var seconds = 60;
							this.text = seconds + 's后重新获取';
							let interval = setInterval(() => {
								if (seconds > 0) {
									seconds--;
									this.text = seconds + 's后重新获取'
								} else {
									this.text = '获取验证码';
									clearInterval(interval)
								}
							}, 1000)
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请登录~'
					})
				}
			},

			add() {
				// if (!this.bindPhone) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请输入银行预留手机号'
				// 	})
				// 	return
				// }
				if (!this.realName) {
					uni.showToast({
						icon: 'none',
						title: '请输入真实姓名'
					})
					return
				}
				if (!this.bankCardNumber) {
					uni.showToast({
						icon: 'none',
						title: '请输入银行卡号'
					})
					return
				}
				// if( !this.interbankNumber ) {
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请输入联行号'
				// 	})
				// 	return
				// }

				if (!this.openingBank) {
					uni.showToast({
						icon: 'none',
						title: '请输入开户银行'
					})
					return
				}
				let data = {
					id: this.id,
					// bindPhone: this.bindPhone,
					realName: this.realName,
					// interbankNumber:this.interbankNumber,
					bankCardNumber: this.bankCardNumber,
					openingBank: this.openingBank,
					paymentTermType: 1,
					msgCode: this.msgCode
				}
				editPayment(data).then(res => {
					uni.showToast({
						icon: 'none',
						title: '添加成功~'
					})
					if (this.options == 1) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						setTimeout(function() {
							uni.navigateBack({
								delta: 2
							})
						}, 1000)
					}


				})
			}
		}
	}
</script>

<style>
	page {
		background-color: rgba(246, 246, 247, 1);
	}
</style>
<style lang="less">
	.content {
		display: flex;
		align-items: center;
		flex-direction: column;

		// 手机号
		.phoneContent {
			background-color: #fff;
			position: relative;
			width: 662rpx;
			padding: 28rpx 20rpx 16rpx 28rpx;

			.name {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 36rpx;
			}

			.placeholder {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #BCBDBD;
				line-height: 26rpx;
			}

			.input {
				margin-top: 24rpx;
				height: 56rpx;
				width: 100%;
				border-bottom: 1rpx solid rgba(249, 249, 249, 1);
			}

			.codeContent {
				position: absolute;
				right: 40rpx;
				bottom: 20rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(83, 167, 0, 1);
				line-height: 37rpx;
			}
		}

		.loginContent {
			width: 670rpx;
			height: 88rpx;
			background-color: rgba(225, 225, 225, 1);
			border-radius: 45rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-top: 60rpx;
		}

		.loginContentSubmit {
			background-color: rgba(83, 167, 0, 1);
		}

	}
</style>